<template>
    <!-- 首页3线性统计图 -->
    <div id="linechart2" ref="home3" style="width: 100%; height: 100%" />
</template>
<script>
import * as echarts from 'echarts';

export default {
    mounted() {
        let that = this;
        setTimeout(function () {
            that.initChart3();
        }, 0)
    },
    methods: {
        initChart3() {
            let linechart2 = this.$echarts.init(this.$refs.home3);
            var option = {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    textStyle: { color: "#fff" },
                    data: ["低风险", "中风险", "高风险"],
                    top: "5%",
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    axisLabel: {

                        fontSize: 12, // 设置字体大小
                        color: "#fff", // 设置字体颜色
                    },
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "杭州",
                        "宁波",
                        "郑州",
                        "上海",
                        "深圳",
                        "宁夏",
                        "西安",
                        "北京",
                    ],
                },
                yAxis: {
                    axisLabel: {
                        fontSize: 12, // 设置字体大小
                        color: "#fff", // 设置字体颜色
                    },
                    type: "value",
                },
               
                series: [
                    {
                        name: "低风险",
                        type: "line",
                        stack: "总量",
                        lineStyle: {
                            width: 0,
                            color: 'transparent' // 或者只设置 width: 0  
                        },
                        symbol: 'image://',
                        // areaStyle: {},
                        symbolSize: 20,
                        data: [51, 36, 383, 282, 585, 520, 362, 216],
                    },
                    {
                        name: "中风险",
                        type: "line",
                        stack: "总量",
                        lineStyle: {
                            width: 0,
                            color: 'transparent' // 或者只设置 width: 0  
                        },
                       
                        symbol: 'image://',
                        // areaStyle: {},
                        symbolSize: 20,
                        data: [220, 182, 191, 234, 290, 160, 153, 156],
                    },
                    {
                        name: "高风险",
                        type: "line",
                        stack: "总量",
                        lineStyle: {
                            width: 0,
                            color: 'transparent' // 或者只设置 width: 0  
                        },
                        symbol: 'image://',
                        // areaStyle: {},
                        symbolSize: 20,
                        data: [220, 182, 191, 234, 290, 160, 153, 162],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            linechart2.setOption(option);
        },
    }
};
</script>
